<template>
    <div class="fxn-margin-b-20">
        <div class='fxn-search'>
            <el-form :inline="true" :model="SearchForm" ref="SearchForm" :label-width="labelWidth">
                <el-form-item v-for="(item,index) in searchData" :key="index" :label="item.label" :prop="item.prop">
                    <el-input v-if="item.type == 'input'" v-model="SearchForm[item.prop]" :placeholder="item.placeholder"></el-input>
                    <el-select v-if="item.type == 'select'" v-model="SearchForm[item.prop]" filterable clearable :multiple="item.multiple" :collapse-tags="item.tags" :placeholder="item.placeholder">
                        <el-option v-for="list in item.data" :label="list[item.selectlabel]" :value="list[item.selectvalue]"></el-option>
                    </el-select>
                    <el-cascader v-if="item.type == 'cascader'" v-model="SearchForm[item.prop]" :options="item.data" :props="item.props" :show-all-levels="false" collapse-tags clearable />
                    <el-date-picker v-if="item.type == 'daterange'" v-model="SearchForm[item.prop]" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  type="daterange" clearable range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    <el-date-picker v-if="item.type == 'monthrange'" v-model="SearchForm[item.prop]" format="YYYY-MM" value-format="YYYY-MM"  type="monthrange" clearable range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
                    <el-date-picker v-if="item.type == 'date'" v-model="SearchForm[item.prop]" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  type="date" clearable placeholder="请选择"></el-date-picker>
                    <el-date-picker v-if="item.type == 'year'" v-model="SearchForm[item.prop]" format="YYYY" value-format="YYYY"  type="year" clearable placeholder="请选择"></el-date-picker>
                    <el-date-picker v-if="item.type == 'month'" v-model="SearchForm[item.prop]" format="YYYY-MM" value-format="YYYY-MM"  type="month" clearable placeholder="请选择"></el-date-picker>
                </el-form-item>

                <el-form-item label=" ">
                    <el-button icon="Refresh" @click="resetForm('SearchForm')">重置</el-button>
                    <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs } from 'vue'
    export default defineComponent({
        props: {
            labelWidth: {
                type: String,
                default: () => {
                    return '100px'
                }
            },
            searchData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            SearchForm: {
                type: Object,
                default: () => {
                    return {}
                }
            },
        },
        setup(props) {
            const { proxy } = getCurrentInstance();

            //初始化数据
            const state = reactive({
                idareaShow: false,
                idAreaData: [],
            })

            //查询
            const handleSearch = () => {
                proxy.$emit('handleSearch',props.SearchForm)
            }

            //清空
            const resetForm = (formName) => {
                props.SearchForm.idareacity = [];
                proxy.$refs[formName].resetFields();
                proxy.$emit('handleSearch',props.SearchForm)
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSearch,
                resetForm,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>